<template>
    <div>
            <el-card class="box-card">
                <div slot="header" class="clearfix header">
                    <span>学生管理 / </span>
                    <i>学生信息列表</i>
                    <el-button style="float: right; padding: 3px 0" type="text"></el-button>
                </div>
                <div class="text item">
                    <!-- 学生信息搜索 -->
        <div class="search">
            <!-- 下拉框 -->
            <el-select v-model="search.type" placeholder="请选择" class="selected">
                <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                </el-option>
        </el-select>
        <!-- 输入框 -->
        <el-input v-model="search.value" placeholder="请输入搜索内容" class="text"></el-input>
        <!-- 点击搜索 -->
        <el-badge class="item">
            <el-button size="small" class="btn" @click="searchStudents">点击立即搜索学生</el-button>
        </el-badge>
        </div>
<!-- 学生信息的渲染 -->
        <el-table :data="studentsList" style="width: 100%">
<!-- 学生编号 -->            
        <el-table-column label="学生编号" width="180">
            <template slot-scope="scope">
                <i class="el-icon-time"></i>
                <span style="margin-left: 10px">{{ scope.row._id }}</span>
            </template>
        </el-table-column>
<!-- 学生姓名 -->
        <el-table-column label="学生姓名" width="180">
            <template slot-scope="scope">
                <el-popover  placement="top">
                    <div slot="reference" class="name-wrapper">
                        <el-tag size="medium">{{ scope.row.name }}</el-tag>
                    </div>
                </el-popover>
            </template>
        </el-table-column>
<!-- 学生年龄 -->
        <el-table-column label="学生年龄" width="180">
            <template slot-scope="scope">
                <el-popover placement="top">
                    <div slot="reference" class="name-wrapper">
                        <el-tag size="medium">{{ scope.row.age }}</el-tag>
                    </div>
                </el-popover>
            </template>
        </el-table-column>
<!-- 学生性别 -->
        <el-table-column label="学生性别" width="180">
            <template slot-scope="scope">
                <el-popover  placement="top">                  
                    <div slot="reference" class="name-wrapper">
                        <el-tag size="medium">{{ scope.row.gender }}</el-tag>
                    </div>
                </el-popover>
            </template>
        </el-table-column>
<!-- 学生所在班级 -->
        <el-table-column label="学生班级" width="180">
            <template slot-scope="scope">
                <el-popover  placement="top">
                    <div slot="reference" class="name-wrapper">
                        <el-tag size="medium">{{ scope.row.classesId? scope.row.classesId.name:'暂无班级信息'  }}</el-tag>
                    </div>
                </el-popover>
            </template>
        </el-table-column>
<!-- 学生的头像 -->
        <el-table-column label="学生头像" width="180">
            <template slot-scope="scope">
                <el-popover trigger="hover" placement="top"> 
                        <img v-if="scope.row.image" :src="scope.row.image" alt="" class="img">
                        <span v-else> 暂无头像信息 </span>
                    <div slot="reference" class="name-wrapper">      
                            <img v-if="scope.row.image" :src="scope.row.image" alt="" class="image">
                            <span v-else> 暂无头像信息 </span>                       
                    </div>
                </el-popover>
            </template>
        </el-table-column>
<!-- 对学生信息的操作 -->
        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
                 <el-button size="mini" type="danger" @click="open(scope.row)">删除</el-button>
            </template>
        </el-table-column>   
    </el-table>
<!-- 分页 -->
        <div class="block">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="1"
                :page-sizes="[3, 5, 7, 9]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>
                </div>
            </el-card>
    </div>
</template>

<script>
    import {createNamespacedHelpers} from 'vuex';
    const {mapActions ,mapState,mapMutations} = createNamespacedHelpers('Students');

    export default {
        methods: {
            ...mapActions(['getStudents', 'deleteStudents']),
            ...mapMutations(['setPageSize','setCurrentPage']),
            //--------------------------------获取学生数据信息------------------------------------
            async getStudentsList() {
                //----------------调用状态机的属性---------------
                const data = await this.getStudents(this.search);  
                //将返回值渲染到页面             
                this.studentsList = data.data.result;
            },
            //--------------------------------搜索学生信息------------------------------------
            async searchStudents(){
                const data = await this.getStudents(this.search);
                this.studentsList = data.data.result;
            },
            //------------------------------修改学生信息-------------------------------------
            handleEdit(index, row) {
                this.$router.push('/home/studentsUpdate/'+row._id)
            },
            //-------------------------------确认删除一条学生信息-------------------------------
            async handleDelete(row) {
                const data = await this.deleteStudents(row._id);
                if (data.code) {
                    this.$message({
                        message: '删除成功',
                        type: 'success'
                    });
                    this.getStudentsList();
                }
            },
            //-------------------------------弹窗提示是否删除学生信息-----------------------------
            open(row) {
                 console.log(row._id)
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    this.handleDelete(row)
                }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
                });
            },
            //-------------------------------每页显示几条学生数据--------------------------------
            handleSizeChange(val) {
                this.setPageSize(val);
                this.getStudentsList();
            },
            //--------------------------------选择当前页数---------------------------------------
            handleCurrentChange(val) {
                this.setCurrentPage(val);
                this.getStudentsList();
            }

        },
        //----------------------------------进入页面加载学生信息列表--------------------------------
        async mounted() {
            this.getStudentsList();
            // console.log(this.pageSize,this.total)
        },
        computed:{
            //-----------------------------引入状态机的分页数据-------------------------------------
            ...mapState(['pageSize','total','pages','currentPage']),
        },
        data() {
            return {
                search: {
                    type: 'name',
                    value: '',
                },
                studentsList: [],              
                currentPage4: 4,
                options: [
                    {value: 'name',label: '姓名'}, 
                    {value: 'age',label: '年龄' }, 
                    {value: 'gender',label: '性别'} 
                    ], 
                deleteId:'', 
            }
        }
    }
</script>

<style scoped>
    .image {
        width: 40px;
        height: 40px;
    }
    .img {
        width: 100px;
        height: 100px;
    }
    .search {
        display: flex;
        margin-bottom: 20px;
        margin-left: 200px;
    }
   .search .text{
       width: 200px;
   }
   .search .btn {
       height: 40px;
   }
   .search .selected {
       width: 150px;
   }
   .header {
       text-align: left;
       font-size: 14px;
   }
   .header span {
       color: #777;
       cursor: pointer;
   }
   .header i {
       color: black;
       font-weight: 600;
       cursor: pointer;
   }
</style>